<template>
  <div class="type-box">
    <section class="main-box" :style="getMainBoxStyle()">
      <div class="city-name" :style="getCityNameStyle()" @click="onCityClick">
        <div class="city-name-left">
          <div class="fz-14 c-333 fw-bold city-name-label">
            {{ selectCity }}
          </div>
          <div class="fz-12 c-999">
            所在城市
          </div>
        </div>
        <span class="change-btn fz-12">更换</span>
      </div>
      <el-image class="qrcode" :style="getQrCodeStyle()" :src="qrCodeData.qrUrl" alt="" srcset="">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </section>

    <van-popup v-model="showPicker" round position="bottom">
      <van-picker show-toolbar :columns="cityList" @cancel="showPicker = false" @confirm="onCityConfirm" />
    </van-popup>
  </div>
</template>

<script>
import { getCitys, getCityCode } from '@/api/livePromotion'
import { getClientBox, isPhone } from '@/util/util'
export default {
  data() {
    return {
      selectCity: '',
      cityList: [],
      qrCodeData: {
        cityName: '',
        qrUrl: '',
      },
      showPicker: false
    };
  },
  methods: {
    handleCityChange() {
      this.getCityCode()
    },
    getCitys() {
      return getCitys().then(res => {
        this.cityList = (res.data && res.data.data) || []
      })
    },
    getCityCode() {
      return getCityCode({ cityNames: this.selectCity, type: 2 }).then(res => {
        this.qrCodeData = res.data.data ? res.data.data[0] : {}
      })
    },
    setMeta() {
      const meta = document.createElement('meta');
      meta.name = 'viewport';
      meta.content = 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0';
      document.head.append(meta)
    },
    setTitle() {
      document.title = '熊猫不走定制';
    },
    onCityConfirm(cityName) {
      this.selectCity = cityName
      this.showPicker = false
      this.getCityCode()
    },
    onCityClick() {
      this.showPicker = true
    },
    getMainBoxStyle() {
      const box = getClientBox()
      box.width = isPhone() ? box.width : 500
      return {
        'width': 180 / 375 * box.width + 'px',
        'height': 170 / 667 * box.height + 'px',
        'top': 384 / 667 * box.height + 'px',
        'left': `calc(50% - ${180 / 375 * box.width / 2 + 'px'})`
      }
    },
    getCityNameStyle() {
      const box = getClientBox()
      return {
        'margin-top': 10 / 667 * box.height + 'px',
        'margin-bottom': 5 / 667 * box.height + 'px',
      }
    },
    getQrCodeStyle() {
      const box = getClientBox()
      return {
        'width': 110 / 667 * box.height + 'px',
      }
    }
  },
  mounted() {
    this.setMeta()
    this.setTitle()
    this.getCityCode().then(() => {
      this.selectCity = this.qrCodeData.cityName
    })
    this.getCitys()
  }
};
</script>
<style lang="scss" scoped>
.type-box {
  height: 100%;
  width: 100%;
  background-image: url("/img/promotion/promotion_bg_2.jpg");
  background-size: 100% 100%;

  .main-box {
    position: absolute;
    text-align: center;

    .city-name {
      background-color: #f7f7f7;
      border-radius: 4px;
      width: 70%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 12px;
      text-align: left;
      .city-name-left {
        max-width: 60%;
      }
      .city-name-label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .change-btn {
        padding-left: 12px;
        border-left: 1px solid #e2e2e2;
        color: #f38622;
        font-weight: 600;
      }
    }

    .qrcode {
      width: 60%;
      min-height: 100px;
    }
  }
}
</style>